<template>
  <view class="content">
    <van-nav-bar title="任务详情" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <view class="detail-list">
      <van-row :gutter="10">
        <van-col span="24">
          <view class="detail-item">
            <view class="detail-item-title">产品名称:</view>
            <view class="detail-item-text">{{ state.detailData.productName }}</view>
          </view>
        </van-col>
        <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">批次号:</view>
            <view class="detail-item-text">{{ state.detailData.batchCode }}</view>
          </view>
        </van-col>
        <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">产品编号:</view>
            <view class="detail-item-text">{{ state.detailData.productCode }}</view>
          </view>
        </van-col>
        <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">规格:</view>
            <view class="detail-item-text">{{ state.detailData.productSpecs }}</view>
          </view>
        </van-col>
        <!-- <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">型号:</view>
            <view class="detail-item-text">{{ state.detailData.productModel }}</view>
          </view>
        </van-col> -->
        <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">颜色:</view>
            <view class="detail-item-text">{{ state.detailData.productColor }}</view>
          </view>
        </van-col>
        <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">模具编号:</view>
            <view class="detail-item-text">{{ state.detailData.mouldCode }}</view>
          </view>
        </van-col>
        <van-col span="12">
          <view class="detail-item">
            <view class="detail-item-title">模具穴数:</view>
            <view class="detail-item-text" v-if="state.detailData.deviceMouldStatus == 2 || state.isPoint"><input class="detail-item-text-num"
                type="number" v-model="state.valueNum"></view>
            <view class="detail-item-text" v-else>{{ state.detailData.mouldHoles }}</view>
          </view>
        </van-col>
      </van-row>
    </view>
    <view class="task-completed">任务完成状态</view>
    <view class="detail-list">
      <view class="task-completed-item">
        <text class="task-completed-item-title">当前工序</text>
        <view class="detail-item-text">{{ state.detailData.procedureName }}</view>
      </view>
      <view class="task-completed-item">
        <text class="task-completed-item-title">计划完成日期</text>
        <view class="detail-item-text">{{ state.detailData.planEndTime }}</view>
      </view>
      <view class="task-completed-item">
        <text class="task-completed-item-title">计划数量</text>
        <view class="detail-item-text">{{ state.detailData.planNum }}</view>
      </view>
      <view class="task-completed-item">
        <text class="task-completed-item-title-num">完成数量</text>
        <view class="detail-item-text detail-item-text-completed">{{ state.detailData.completeNum }}</view>
      </view>
    </view>
    <view class="btn-box">
      <van-button type="primary" :class="item.className" v-for="(item, i) in state.resultBtnArr" :key="item.id"
        @click="updateStates(item, i)" :loading="item.loading">{{ item.name
        }}</van-button>
    </view>
  </view>
</template>

<script setup>

import { reactive, getCurrentInstance } from "vue"

import { onLoad } from "@dcloudio/uni-app"
import {
  getTaskReportDetail, // 获取设备详情
  updateDeviceMould, // 修改调机状态
} from '@/api/list/index.js'
const { proxy } = getCurrentInstance()
const state = reactive({
  styleArr: [
    // 开始调机
    {
      "id": '1',
      "name": "开机调机",
      "states": 2,
      "loading": false,
      "className": "btn-1",
      "msg": "开机调机成功"
    },
    {
      "id": '2',
      "name": "完成调机",
      "states": 3,
      "loading": false,
      "className": "btn-2",
      "msg": "完成调机成功"
    },
    {
      "id": '3',
      "name": "关闭调机",
      "states": 0,
      "loading": false,
      "className": "btn-3",
      "msg": "关闭调机成功"
    },
    {
      "id": '4',
      "name": "调穴",
      "states": null,
      "loading": false,
      "className": "btn-4",
      "msg": "调穴成功"
    },
    {
      "id": '5',
      "name": "拆机",
      "states": 5,
      "loading": false,
      "className": "btn-5",
      "msg": "拆机成功"
    }
  ],
  valueNum: 5,
  paramsData: {
    deviceMouldId: "1",
    taskReportId: "1"
  },
  detailData: {
  }, // 详情数据
  resultBtnArr: [],
  deviceMouldStatus: null,
  isPoint:false,
})

const getTaskReportDetailFn = async () => {
  try {
    uni.showLoading({
      title: '获取中',
    });
    let data = await proxy.$post(getTaskReportDetail, state.paramsData)
    uni.hideLoading();
    let resArr = []
    state.detailData = data.data
    state.valueNum = data.data.mouldHoles
    if (state.detailData.deviceMouldStatus == 0) resArr = ['1']
    if (state.detailData.deviceMouldStatus == 2) resArr = ['2', '3']
    if (state.detailData.deviceMouldStatus == 3) resArr = ['4', '5']
    state.resultBtnArr = state.styleArr.filter(o => {
      return resArr.includes(o.id)
    })
    // console.log(state.resultBtnArr, 'state.resultBtnArr')
  } catch (error) {
    uni.hideLoading();
    // console.log(error, 'error')
    uni.showToast({
      title: error.msg,
      duration: 2000,
      icon:'none'
    });
  }
}

const updateDeviceMouldFn = async (item, i) => {
  console.log(state.resultBtnArr, 'state.resultBtnArr[i]', i)
  try {
    let params = {
      deviceMouldId: state.paramsData.deviceMouldId,
    }
    if (state.deviceMouldStatus !== null) {
      params.deviceMouldStatus = item.states
    }
    if ((state.detailData.deviceMouldStatus == 2 || state.detailData.deviceMouldStatus == 3) && item.id == 4) {
      params.mouldHoles = state.valueNum
    }
    if(item.id == "4" && item.name == "调穴"){
      state.isPoint = true
      item.name = "保存"
      return 
    }
    state.resultBtnArr[i].loading = true
    let data = await proxy.$post(updateDeviceMould, params)
    state.resultBtnArr[i].loading = false
    uni.showToast({
      title: item.msg,
      icon: "none",
      duration: 2000
    });
    getTaskReportDetailFn()
  } catch (error) {
    console.log(state.resultBtnArr, 'state.resultBtnArr[i]', i)
    state.resultBtnArr[i].loading = false
    // console.log(error, 'error')
    uni.showToast({
      title: error.msg,
      icon: "none",
      duration: 2000
    });
  }
}

// 修改设备状态
const updateStates = (item, i) => {
  state.deviceMouldStatus = item.states
  updateDeviceMouldFn(item, i)
}

onLoad((e) => {
  state.paramsData = e
  getTaskReportDetailFn()
})

const onClickLeft = () => {
  console.log(proxy,'proxy')
  history.back(-1)
}
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 30rpx;
}

.van-nav-bar {
  background: none;
  border: none;
}

.detail-list {
  background: #FFFFFF;
  border: 1px solid #EBF0FF;
  border-radius: 20rpx;
  margin: 0 30rpx;
  padding: 30rpx;
}

.detail-item {
  margin-bottom: 20rpx;

  .detail-item-title {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 36rpx;
    color: #8F92A1;
    margin-top: 10rpx;
  }

  .detail-item-text {
    font-weight: 600;
    font-size: 32rpx;
    height: 54rpx;
    line-height: 58rpx;
    color: #171717;
    margin-top: 10rpx;
  }
}

.task-completed {
  font-weight: 700;
  font-size: 30rpx;
  line-height: 150%;
  color: #223263;
}

.task-completed {
  margin: 28rpx 30rpx 20rpx 30rpx;
}

.task-completed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .task-completed-item-title {
    font-weight: 400;
    font-size: 28rpx;
    color: #9098B1;
  }

  .task-completed-item-text {
    font-weight: 700;
    font-size: 32rpx;
    height: 58rpx;
    line-height: 58rpx;
    color: #171717;
  }

  .task-completed-item-title-num {
    font-weight: 700;
    font-size: 28rpx;
    line-height: 150%;
    color: #223263;
  }

  .task-completed-item-text-num {
    font-weight: 700;
    font-size: 32rpx;
    height: 54rpx;
    line-height: 54rpx;
    color: #40BFFF;
  }
}

.detail-item-text-num {
  width: 180rpx;
  height: 54rpx;
  padding: 0 10rpx;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-1 {
  background: radial-gradient(125% 125% at 85.42% 0%, #85D3FF 0%, #FE9B4B 0.01%, #F47814 100%);
  border-radius: 8px;
}

.btn-box {
  margin: 30rpx;
}

.van-button {
  width: 100%;
  height: 140rpx;
  background: radial-gradient(125% 125% at 85.42% 0%, #85D3FF 0%, #FE9B4B 0.01%, #F47814 100%);
  border-radius: 16rpx;
  font-weight: 600;
  font-size: 40rpx;
  line-height: 140rpx;
  text-align: center;
  color: #FFFFFF;
  border: none;
  margin-bottom: 20rpx;
}

.detail-item-text {
  font-weight: bold;
}

.detail-item-text-completed {
  color: #40BFFF;
}

.btn-2 {
  background: radial-gradient(125% 125% at 85.42% 0%, #85D3FF 0%, #2596D7 100%);
}

.btn-3 {
  background: radial-gradient(125% 125% at 85.42% 0%, #99B1BE 0%, #273F4C 100%);
}

.btn-4 {
  background: radial-gradient(125% 125% at 85.42% 0%, #91D9CD 0%, #1AB79B 100%);
}

.btn-5 {
  background: radial-gradient(125% 125% at 85.42% 0%, #8A94EF 0%, #3D4EE8 100%);
}
</style>
